<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"/>
		<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>	
	</head>
	<body>
		<div id="map"></div>
		<script type="text/javascript" id="my_script">
		// 绘制多边形

			var map = L.map('map', {
        center: [39.916322, 116.390943],
        zoom: 14,
				maxZoom: 18,
				minZoom: 10,
        crs: L.CRS.EPSG4326 // leaflet默认是3857坐标系
      });
			L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=89cd1623dd7336f91f85222d2022edae', {
				maxZoom: 18,
				minZoom: 10,
				zoomOffset: 1,
				baseLayer: true
			}).addTo(map)
			L.tileLayer('http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=89cd1623dd7336f91f85222d2022edae', {
				maxZoom: 18,
				minZoom: 10,
				zoomOffset: 1,
				baseLayer: true
			}).addTo(map)

			// 设置语言
			map.pm.setLang("zh");
      map.pm.addControls({
        position: "bottomright",
        drawPolygon: true, //绘制多边形
        drawMarker: false, //绘制标记点
        drawCircleMarker: false, //绘制圆形标记
        drawPolyline: true, //绘制线条
        drawRectangle: true, //绘制矩形
        drawCircle: true, //绘制圆圈
        editMode: true, //编辑多边形
        dragMode: true, //拖动多边形
        cutPolygon: false, //添加⼀个按钮以删除多边形⾥⾯的部分内容
        removalMode: true, //清除多边形
      });
			// 全局设置绘制样式
			map.pm.setPathOptions({
        color: "orange",
        fillColor: "green",
        fillOpacity: 0.4,
      });

			map.on("pm:create", (e) => {
        console.log(e, "绘制完成时调⽤");
        if (e.shape == "Circle") {
          console.log(e.layer._latlng, e.layer._radius, "绘制坐标");
        } else {
          console.log(e.layer._latlngs[0], "绘制坐标");
        }
      });
		</script>
	</body>
</html>
